<template>
	<view>
		<view class="upBox">
			<text class="rowTitle">默认选择按钮样式</text>
			<hlUploadImg ref="hlUploadImg" :imgList="oldImgList" ></hlUploadImg>
			
			<text class="rowTitle">选择按钮文本与样式</text>
			<hlUploadImg ref="hlUploadImg" :imgList="oldImgList" :imgStyle="imgStyle" :selectBtn="upStyle"></hlUploadImg>
			
			<text class="rowTitle">选择按钮图标与样式</text>
			<hlUploadImg ref="hlUploadImg" :imgList="oldImgList" :imgStyle="imgStyle" :selectBtn="upStyle2"></hlUploadImg>
			
			<text class="rowTitle">使用图片作为图标</text>
			<hlUploadImg ref="hlUploadImg" :imgList="oldImgList" :imgStyle="imgStyle" :selectBtn="upStyle3"></hlUploadImg>
		</view>
	</view>
</template>
<script>
	import hlUploadImg from '../../components/hlUploadImg/hlUploadImg.vue';
	export default {
		components: {
			hlUploadImg
		},
		data() {
			return {
				oldImgList: [
					'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2583035764,1571388243&fm=26&gp=0.jpg',
					'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3876535482,3811402221&fm=11&gp=0.jpg'
				],
				imgStyle: {
					height: 0.8,
					borderRadius: '10upx'
				},
				// 样式1
				upStyle: {
					icon: '', //图标，空字符串不需要图标
					text: '点击上传', //按钮文字
					textSty:{			//文字样式
						fontSize:'24rpx',
						color:'#ffffff'
					},
					btnSty: {
						border: 'none',
						background: '#007aff',
						borderRadius: '0px'
					}
				},
				// 样式2
				upStyle2: {
					icon: 'icon-camerafill', //图标，空字符串不需要图标
					iconSty:{			//图标样式
						color: "#67C23A",
					},
					text: '', //文本  空字符串不需要要文字
					btnSty: {
						border: '1px dashed #67C23A',
						borderRadius: '0px'
					}
				},
				// 样式3
				upStyle3:{
					icon:'../../static/del.png',
					iconSty:{
						width:'66rpx',
						height:'66rpx'
					}
				}
				
			};
		}
	};
</script>

<style lang="scss"></style>
